<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>我的班级校车名单-云校通-教师</title>
<jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
<body ontouchstart class="js-jf">
<div class="weui_tab tab-bottom">
	<div class="weui-header bg-blue"> 
  		<div class="weui-header-left"> <a onclick="back()" href="javascript:" class="icon icon-109 f-white">返回</a> </div>
    	<h1 class="weui-header-title">班级学生名单</h1>
    	<div class="weui-header-right" onclick="refush()">
    		<span class="icon icon-21"></span> 刷新
    	</div>
    </div>
	<div class="weui_tab_bd">
    	<div class="weui_cells weui_cells_access mt0">
	        <div class="weui_cell">
		        <div class="weui_cell_hd">
		         	<label class="weui_label">请选择班级</label>
		        </div>
	    		<div class="weui_cell_bd weui_cell_primary">
					<input type="text" id="regTeacher" class="weui_input weui_input-select tr main1" value="请选择" readonly="readonly">
	   			</div>
	   			<div class="weui_cell_ft"></div>
			</div>
       </div>
       <div class="weui_cells weui_cells_access mt0 mb55" id="studentList">
       </div>
       <div class="weui_tabbar hide" style="position: fixed;" id="totalDetail">
			<div class="fsdx_tabbar xcgl_tabbar">
	            <span class="left">全车共:<span id="totalCount"></span>人</span>
	            <span class="right f-14 pr20">已上车:<span id="boardCount">0</span>人</span>
	        </div>
		</div> 
	</div>
</div>
<!--弹窗-->				
<div class="hide_bd1"></div>
<div class="hb_choose type2" style="top: 90px;width: 100%;left:0;">
	<div class="bj">
	</div>
</div>
<!--End弹窗-->
<script type="text/javascript">
	$(function(){
		$("#regTeacher").click(function() {
	    	$(".type2").show();
			$(".hide_bd1").attr("style", "display: block;");
		})
		$(document).on("click", ".hb_choose .title>li", function(e) {
			$(this).addClass("active").siblings().removeClass("active");
			$(".yng").hide();
			$("#" + $(this).attr("data-key")).show();
    	});
		$(document).on("click", ".list_3 .list_c3", function(e) {
			$("#regTeacher").val($(this).attr("data-name"));
			var dataValue = $(this).attr("data-value");
			$("#regTeacher").attr("data-value", dataValue);
			$(".type2").hide();
			$(".hide_bd1").attr("style", "display: none;");
			$("#totalDetail").show();
			var vy = dataValue.split("-");
			loadStudentList(vy[0], vy[1]);
		});
	    loadClass();
	})
	function refush(){
		var dataValue = $("#regTeacher").attr("data-value");
		if(dataValue) {
			var vy = dataValue.split("-");
			if(vy.length == 0) return;
			loadStudentList(vy[0], vy[1]);
		}
	}
	function loadStudentList(grade, clazz){
		$.ajax({
    		url: basePath + "/ls/schoolbus/studentList",
    		type: 'POST',
    		dataType : "json",
    		data: {
    			grade: grade,
    			clazz: clazz
    		},
    		success: function(data) {
    			if(data != null && data.length > 0) {
    				var studentHtml = "", boardCount = 0;
    				for(var i in data) {
    					var itm = data[i];
    					var isBoard = false;
    					if(itm.isBoard == 1) {
    						isBoard = true;
    						boardCount += 1;
    					}
    					studentHtml += '<div class="weui_cell">\
				                <div class="weui_cell_bd weui_cell_primary">\
				                    <p class="xcgl_student_wrap">\
				                    	<span class="xcgl_student_name" style="width: 35%;">'+itm.lineName+'</span>\
				                    	<span class="xcgl_student_name" style="width: 32%;">'+itm.siteName+'</span>\
				                    	<span class="xcgl_student_name" style="width: 15%;">'+itm.studentName+'</span>\
				                    	<span class="xcgl_student_stateWrap '+(isBoard ? 'f-green' : 'f-red')+'" style="width: 18%;margin-left:0;">'+(isBoard ? '已上车' : '未上车')+'</span>\
				                    </p>\
				                </div></div>';
    				}
    				$("#totalCount").html(data.length);
    				$("#boardCount").html(boardCount);
    				$("#studentList").html(studentHtml);
    			}
    		},
    		error: function(data) {
    			alert("系统异常,请联系管理员");
    		}	
		});
	}
	function loadClass() {
		$.ajax({
	   		url: basePath + "/classList",
	   		type: 'POST',
	   		dataType : "json",
	   		success: function(data) {
	   			if(data != null) {
	   				var html = '<ul class="title">';
	   				for(var i in data) {
	   					var itm = data[i];
	   					html += '<li class="'+(i == 0 ? "active " : "")+'" data-key="s'+itm.grade+'">'+itm.gradeText+'</li>';
	   				}
	   				html += "</ul>";
	   				for(var i in data) {
	   					var itm = data[i];
	   					html += '<div class="yng" id="s'+itm.grade+'"><ul class="list_3">';
	   					for(var j in itm.classList) {
	   						var itm1 = itm.classList[j];
	   						var gradeClass = itm1.grade + "-" + itm1.clazz;
	   						html += '<li><div class="weui_cell_hd list_c3 f-green" data-value="'+gradeClass+'" data-name="'+itm.gradeText+"(" + itm1.clazz +"班)"+'">\
										'+itm1.clazz+'班\
									</div></li>';
	   					}
	   					html += '</ul></div>';
	   				}
	   				$(".bj").html(html);
	   				$("#s" + data[0].grade).show();
	   			}
	   		},
	   		error: function(data) {
	   		}
	   	});
	}
</script>
</body>
</html>